<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~">
		</shopro-empty>

		<view v-else-if="isConnected && isRefresh" class="content-box">
			<!-- 导航栏 -->
			<home-head v-if="headSwiperList && headSwiperList.length" :scrollTop="scrollTop" borderRadius="0"
				:navTitle="initShop.name" :list="headSwiperList"></home-head>

			<!-- vip -->
			<view class="vip-image" @click="$Router.push({ path: '/pages/goods/detail', query: { id: 3 } })">
				<image class="w100" src="/static/images/index-vip.png" mode="widthFix" />
			</view>

			<!-- 核销机构 -->
			<view class="organization">
				<view class="organization-title">核销机构</view>
				<sh-organization v-for="(item, index) in 1" :key="index"></sh-organization>
			</view>

			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<!-- 悬浮按钮 -->
			<!-- <shopro-float-btn></shopro-float-btn> -->
			<!-- 连续弹窗提醒 -->
			<!-- <shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal> -->
			<!-- 隐私协议 -->
			<!-- #ifdef APP-PLUS -->
			<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width: 100%;"></view>
			<!-- #endif -->
		</view>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
	import shBanner from "./components/sh-banner.vue";
	import shOrganization from "./components/sh-organization.vue";
	import shHotGoods from "./components/sh-hot-goods.vue";
	import shAdv from "./components/sh-adv.vue";
	import shCoupon from "./components/sh-coupon.vue";
	import shSeckill from "./components/sh-seckill.vue";
	import shGroupon from "./components/sh-groupon.vue";
	import shRichtext from "./components/sh-richtext.vue";
	import shTitleCard from "./components/sh-title-card.vue";
	import shSearch from "./components/sh-search.vue";
	import shCategoryTabs from "./components/sh-category-tabs.vue";

	import privacyModal from "./index/privacy-modal.vue";
	import homeHead from "./index/home-head.vue";

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from "@/env";
	import shLive from "./components/sh-live.vue";
	// #endif

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	export default {
		components: {
			shBanner,
			shOrganization,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,

			privacyModal,
			homeHead,

			// #ifdef MP-WEIXIN
			shLive,
			// #endif
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,

				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				scrollTop: 0,
			};
		},
		computed: {
			...mapGetters(["initShop", "homeTemplate", "hasTemplate", "isLogin"]),
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			},
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			let that = this;
			this.enable = true;
			this.isLogin && this.getCartList();
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// #ifdef APP-VUE
			// plus.runtime.disagreePrivacy();
			console.log(plus.runtime.isAgreePrivacy(), 1111111111);
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		},
		methods: {
			...mapActions(["appInit", "getTemplate", "getCartList"]),
			// 初始化
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			},
		},
	};
</script>

<style lang="scss">
	.vip-image {
		position: relative;
		margin-top: 274rpx;
		/* #ifdef H5 */
		margin-top: 194rpx;
		/* #endif */
		padding: 0 20rpx;
		width: 100%;
		height: 942rpx;
	}

	.organization {
		margin-top: 52rpx;
		margin-bottom: 280rpx;

		.organization-title {
			padding: 32rpx;
			background-color: #ffffff;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
</style>
